<!DOCTYPE html>
<html>
<head>
	<title>EaselJS: Sprite Sheet Example</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
	
	
	
	<script>
		// this sets the namespace for CreateJS to the window object, so you can instantiate objects without specifying 
		// the namespace: "new Graphics()" instead of "new createjs.Graphics()"
		// this is a quick way to make projects built on pervious versions of EaselJS run without extensive modifications
		var createjs = window;
	</script>
	
	<script src="assets/preloadjs-0.2.0.min.js"></script>

	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script type="text/javascript">

	var assets;
	var stage;
	var w, h;
	var sky, grant, ground, hill, hill2;
	var runningRate, isInWarp, isStationary;
	var stationaryPosition, isPassed;

		function init() {
			if (window.top != window) {
				document.getElementById("header").style.display = "none";
			}

			document.getElementById("loader").className = "loader";

			var canvas = document.getElementById("testCanvas");
			stage = new Stage(canvas);

			runningRate = 2.5;
			isInWarp = false;
			isStationary = false;
			stationaryPosition = 300;
			isPassed = false;

		spriteSheet ={"animations": {"run": [0, 25], "jump": [26, 63]}, "images": ["assets/runningGrant.png"], "frames": {"regX": 0, "height": 292.5, "count": 64, "regY": 0, "width": 165.75}};

		var ss = new SpriteSheet(spriteSheet);
		grant = new BitmapAnimation(ss);

		// Set up looping
		ss.getAnimation("run").next = "run";
		ss.getAnimation("jump").next = "run";
		grant.gotoAndPlay("run");

		// Position the Grant sprite
		grant.x = -200;
		grant.y = 90;
		grant.scaleX = grant.scaleY = 0.8;

		// grab canvas width and height for later calculations:
		w = canvas.width;
		h = canvas.height;

			assets = [];

		manifest = [
			{src:"assets/runningGrant.png", id:"grant"},
			{src:"assets/sky.png", id:"sky"},
			{src:"assets/ground.png", id:"ground"},
			{src:"assets/parallaxHill1.png", id:"hill"},
			{src:"assets/parallaxHill2.png", id:"hill2"}
		];

		loader = new PreloadJS();
		loader.useXHR = false;  // XHR loading is not reliable when running locally.
		loader.onFileLoad = handleFileLoad;
		loader.onComplete = handleComplete;
		loader.loadManifest(manifest);
		stage.autoClear = false;
	}

		function handleFileLoad(event) {
			assets.push(event);
		}

		function handleComplete() {
			for(var i=0;i<assets.length;i++) {
				var item = assets[i]; //loader.getResult(id);
				var id = item.id;
				var result = item.result;

				if (item.type == PreloadJS.IMAGE) {
					var bmp = new Bitmap(result);
				}

				switch (id) {
					case "sky":
						sky = new Shape(new Graphics().beginBitmapFill(result).drawRect(0,0,w,h));
						break;
					case "ground":
						ground = new Shape();
						var g = ground.graphics;
						g.beginBitmapFill(result);
						g.drawRect(0, 0, w+330, 79);
						ground.y = h-79;
						break;
					case "hill":
						hill = new Shape(new Graphics().beginBitmapFill(result).drawRect(0,0,282,59));
						hill.x = Math.random() * w;
						hill.scaleX = hill.scaleY = 3;
						hill.y = 144;
						break;
					case "hill2":
						hill2 = new Shape(new Graphics().beginBitmapFill(result).drawRect(0,0,212,50));
						hill2.x = Math.random() * w;
						hill2.scaleX = hill2.scaleY = 3;
						hill2.y = 171;
						break;
				}
			}

			document.getElementById("loader").className = "";

			if (grant == null) {
				//console.log("Can not play. Grant sprite was not loaded.");
				return;
			}

			stage.addChild(sky, ground, hill, hill2, grant);
			stage.onMouseDown = handleJumpStart;

			Ticker.setFPS(40);
			Ticker.addListener(window);
		}

		function handleJumpStart() {
			grant.gotoAndPlay("jump");
		}

		function tick() {
			var outside = w + 20;
			var position = grant.x+runningRate;
			grant.x = (position >= outside) ? -200 : position;

			ground.x = (ground.x-15) % 330;
			hill.x = (hill.x - 0.8);
			if (hill.x + 838 <= 0) { hill.x = outside; }
			hill2.x = (hill2.x - 1.2);
			if (hill2.x + 633 <= 0) { hill2.x = outside; }

			stage.update();
		}
	</script>
</head>
<body onload="init();">

	<div id="loader"></div>

	<header id="header" class="EaselJS">
		<h1><span class="text-product">Easel<strong>JS</strong></span> Sprite Sheets</h1>
		<p>An example of a sprite sheet using <strong>BitmapAnimation</strong>. This demos also shows playing named
			animations (jump and run), and animation chaining using <strong>getAnimation("name").next</strong>.
			Click the stage to initialize a jump, which will continue back into the run when it is complete.</p>
		<p>Some browsers can not load images or access pixel data when running local files, and may throw a security error or not
	    			work unless the content is running on a server.</p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
	</div>

</body>
</html>
